<template>
  <div class="main">
    <div class="public-cards-box">
      <CardComponent v-for="(card, index) of publicCards" :key="index" :rank="card.rank" :suit="card.suit" />
    </div>
    <div class="cards-box">
      <CardComponent v-for="(card, index) of myCards" :key="index" :rank="card.rank" :suit="card.suit" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { compose } from "ramda";
import CardComponent from "./components/card/CardComponent.vue";
import { generateAllCard, shuffle, cutShuffle, deal,dealPublic } from "./utils/common.ts";

const cards = compose(
  shuffle,
  cutShuffle,
  shuffle,
  cutShuffle,
  cutShuffle,
  shuffle,
  generateAllCard
)()
const allUserCard = deal(cards)
console.log(allUserCard)
const myCards = allUserCard[3]
console.log(myCards)
let publicCards = dealPublic(cards, 3)
console.log(cards)
publicCards = publicCards.concat(dealPublic(cards))
publicCards = publicCards.concat(dealPublic(cards))
// console.log(shuffle(shuffle(cards)))
</script>

<style scoped>
.main {
  background-color: #f1f1f1;
  height: 100vh;
  width: 100vw;
}

.cards-box {}
</style>
